<template>
  <div>
    <el-row>
      <el-col :span="20" :offset="2">
        <div style="text-align: left;margin-top: 50px;">
          <div class="block" style="display: inline-block">
            <el-date-picker
              v-model="searchtime"
              type="month"
              placeholder="选择指定年月">
            </el-date-picker>
            <el-button style="margin-left: 20px" @click="search">搜索</el-button>
            <span></span>
          </div>
          <div style="display: inline-block;margin-left: 450px">
            <span>{{this.month}}月份签到总次数：{{ this.count }}</span>
          </div>
        </div>
      </el-col>
      <el-col :span="20" :offset="2">
        <div style="margin-top: 10px">
          <template>

            <el-table
              :data="tableData"
              style="width: 100%"
              height="450">
               <el-table-column
                 fixed
                label="日期"
                width="120">
                  <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.startime|dataFMT }}</span>
                </template>
              </el-table-column>
              <el-table-column

                prop="startime"
                label="签到时间"
                width="125">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.startime|dateHMS }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="endtime"
                label="签退时间"
                width="125">
                  <template slot-scope="scope">
                  <span >{{ scope.row.endtime|dateHMS }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="part"
                label="部门"
                width="100">
              </el-table-column>
              <el-table-column
                prop="_is_delay"
                label="是否迟到"
                width="100">
              </el-table-column>
              <el-table-column
                prop="_is_before"
                label="是否早退"
                width="100">
              </el-table-column>
              <el-table-column
                prop="_is_leave"
                label="是否请假"
                width="100">
              </el-table-column>
              <el-table-column
                prop="_is_leave"
                label="是否出差"
                width="100">
              </el-table-column>
              <el-table-column
                prop="long_time"
                label="工作时长"
                width="120">
              </el-table-column>
            </el-table>
          </template>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  export default {
    name: 'ManageSignView',
    data () {
      return {
        searchtime: '',//选择的时间
        month: 0,
        count: 0,
        tableData: []
      }
    },
    methods: {
      first_get () {
        this.$axios({
          url: this.$settings.base_url + '/user/showstaffsign/',
          mothod: 'get',
          params: { 'flask': 1 }
        }).then(res => {
          this.count = res.data.count
          this.tableData = res.data.data
          this.month = res.data.month

        })
      },
      //搜索走这个函数
      search(){
        this.month = this.$moment(this.searchtime).format('YYYY年MM')
        console.log(this.month)
        this.$axios({
          url:this.$settings.base_url+'/user/showstaffsign/',
          mothod: 'get',
          params: {'the_time':this.$moment(this.searchtime).format('YYYY-MM-DD HH:mm:ss')}
        }).then(res=>{
            this.count = res.data.count
          this.tableData = res.data.data
          this.month = res.data.month
           this.$message.success(`搜索成功，搜索到${this.count}条记录。`)
        })

      }

    },
    mounted () {
      //初始化获取当前月份的签到情况
      this.first_get()
    }
  }
</script>

<style scoped>

</style>
